<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no" />
    <title>caseList</title>
    <link rel="shortcut icon" href="./img/logo.png" type="image/x-icon" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/caseList.css">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/site.css">
    <link rel="stylesheet" href="./font/iconfont.css">
    <script src="./js/rem.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/zepto.js"></script>


</head>

<body>
    <div id="app">
        <div class="top">
            <div class="left"><img src="./img/logo.png" alt=""></div>
            <div class="right iconfont icon-ren1-copy"></div>
        </div>
        <div class="section wow bounceInLeft search" data-wow-offset="300">
            <div class="img"></div>
            <input type="text" placeholder="请输入搜索内容" onfocus="this.placeholder=''" onblur="this.placeholder='请输入搜索内容'">
        </div>

        <div class="box">
            <div class="box_top">
                <ul>
                    <li>户型</li>
                    <li>风格</li>
                    <li>面积</li>
                    <li>造价</li>
                </ul>
            </div>

            <div id="contain" class="section wow bounceInLeft contain" data-wow-offset="300"></div>

            <div class="footer">
                <div class="left">
                    <div class="img1 iconfont icon-zhuye"></div>
                    首页
                </div>

                <div class="left">
                    <div class="img2 iconfont icon-yuyue"></div>
                    预约
                </div>

                <div class="left">
                    <div class="img3 iconfont icon-anli"></div>
                    案例
                </div>

                <div class="left">
                    <div class="img4 iconfont icon-weizhi1"></div>
                    公司
                </div>
            </div>
        </div>

        <img class="footer_e" id="gotoTop" src="./img/返回顶部.png" alt="" />

    </div>


    <script src="./js/wow.js"></script>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>


    <script>
        // 监听事件
        window.addEventListener('scroll', function () {
            let t = $('body,html').scrollTop(); // 目前监听的是整个body的滚动条距离
            console.log(t);
            if (t > 100) {
                $('.box_top').addClass('box-active')
            } else {
                $('.box_top').removeClass('box-active')
            }
        })
    </script>

    <!-- 数据渲染 -->
    <script>
        let count = 0
        let totalPage = 0
        let timerId = 0
        let num = 1
        let pageInfo = {
            // 页码
            page: 1,
            // 页面显示条数
            rows: 5,
            // 房屋的类型
            houseType: '三居室',
            // 装修的类型
            fitType: '现代',
            // >=面积
            area: '120',
            // >=装修金额
            price: '',
            // 标题
            name: '',
        }
        async function getCaseList() {
            let options = {
                url: 'caseList',
                type: 'get',
                data: pageInfo,
            }
            let res = await request(options)
            console.log(res.data.data.count)

            //总条数
            count = res.data.data.count
            console.log(count);

            // 总页数
            totalPage = Math.ceil(count / pageInfo.rows)
            console.log(pageInfo.rows);
            let arr = res.data.data.rows
            // console.log('<-------------response----------------')
            // console.log(count, totalPage, arr)
            // console.log('--------------response--------------->')
            renderElement(arr)
        }
        console.log(totalPage);



        function renderElement(arr) {

            let contain = document.getElementById('contain')
            let str = ''
            for (let i = 0; i < arr.length; i++) {
                let price = (arr[i].price / 10000).toFixed(1)
                let rows = `
                <div class="big section wow bounceInLeft">
                <div class="img"><img data-src="${arr[i].img}" src="./img/load.gif"></div>
                <div class="wz">${arr[i].name}</div>
                <div class="bottom">
                <div class="hx">${arr[i].house_type}</div>
                <div class="fg">${arr[i].fit_type}</div>
                <div class="mj">${arr[i].area}m²</div>
                <div class="zj">${price}w元</div>
                <div class="ll"><div class="yj"></div> ${arr[i].views}</div>
            </div>
            </div>
            `
                str += rows

            }
            $('#contain').append(str)
            start()
       }




     // footer点击切换颜色事件
       $(function(){
        let foo = document.getElementsByClassName('left')
        for(let i=0;i<foo.length;i++){
            foo[i].onclick=function(){
                for(let j=0;j<foo.length;j++){
                    foo[j].style.color = "black"
                }
                this.style.color="red"
            }
        }
       })




       // wow.js
        $(function () {
            getCaseList()
            
            new WOW({
                boxClass: 'wow',
                animateClass: 'animated',
                offset: 0,
                mobile: true,
                live: true,
            }).init();



            //监听页面滚动事件，加载下一页数据
            window.onscroll = function () {
                //获得滚动的距离
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body
                    .scrollTop
                // 根据文档滚动距离判断回到顶端按钮是否显示
                if (scrollTop > 300) {
                    $('#gotoTop')[0].style.display = 'block'
                } else {
                    $('#gotoTop')[0].style.display = 'none'
                }
                //获得视口高度
                let clientHeight = document.documentElement.clientHeight
                //获得文档高度
                let boxHeight = parseInt(getComputedStyle($('#app')[0], null).height)
                console.log(scrollTop + clientHeight - 49, boxHeight);
                if (scrollTop + clientHeight - 49 >= boxHeight) {
                    console.log('滚动到到底了')
                    //准备加载下一页
                    getNextPage()
                }
            }


            // 点击回到顶端
            $('.footer_e').click(function () {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document
                    .body.scrollTop
                if (timerId) {
                    clearInterval(timerId)
                }
                timerId = setInterval(function () {
                    scrollTop -= 10
                    if (scrollTop <= 0) {
                        scrollTop = 0
                        document.documentElement.scrollTop = 0
                        clearInterval(timerId)
                    }
                    document.documentElement.scrollTop = scrollTop
                })
            })
        })



        // 加载下一页
        function getNextPage() {
            console.log(pageInfo)
            let num = pageInfo.page

            if (num > totalPage) {
                num = totalPage
                console.log('已经是最后一页了')
                return
            }
            num++
            pageInfo.page = num
            getCaseList()
        }





        
        // 图片懒加载
        //打开页面 调用一次 
        start()

        $(window).on('scroll', function () {
            start() //滚动页面时 调用一次
        })

        //加载函数 
        function start() {
            $('.img img').not('[data-isLoaded]').each(function () {
                var $node = $(this)
                if (isShow($node)) {
                    //设置一个定时器起到缓冲效果 
                    setTimeout(function () {
                        loadIng($node)
                    }, 1000)

                }
            })
        }
        // 页面逻辑
        function isShow($node) {
            // 当一个元素出现在我们眼前（小于窗口高度）上窗口滚动的高度的时候就意味着到达目标点 
            // 可以开始加载图片或者其他内容
            return $node.offset().top <= $(window).height() + $(window).scrollTop()
        }
        // 显示状态
        function loadIng($img) {
            // 获取目标元素 并替换 
            $img.attr('src', $img.attr('data-src'))
            //性能优化 进行判断 已经加载的不会再进行加载  
            $img.attr('data-isLoaded', 1)
        }
    
</script>

</body>

</html>